import React from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import { Modal } from 'antd';
import printJS from 'print-js';

interface PrintElemProps {
  dispatch?: Dispatch;
  hasReceipt?: boolean;
  receipt?: any;
}

@connect(({
  logisCenterWithdrawList: { hasReceipt, receipt },
}: any) => ({
  hasReceipt,
  receipt,
}))

class PrintElemInfo extends React.Component<PrintElemProps> {
  handleHiddenModal = () => {
    const { dispatch }: any = this.props;
    dispatch({
      type: 'logisCenterWithdrawList/changeReceipt',
      payload: false,
    });
  }

  handlePrint = () => {
    printJS({
      printable: 'billDetails',
      type: 'html',
      targetStyles: ['*'],
      onPrintDialogClose: () => '关闭',
      onError: error => error,
    });
  }

  render() {
    const { hasReceipt, receipt = {} }: any = this.props;
    const { list = [] } = receipt;

    return (
      <Modal
        title="打印交接单"
        destroyOnClose
        visible={hasReceipt}
        width={1200}
        okText="打印"
        onOk={this.handlePrint}
        onCancel={this.handleHiddenModal}
      >
        <div id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <thead>
              <tr>
                <td
                  colSpan={13}
                  style={{
                    textAlign: 'center',
                    fontSize: '20px',
                    fontWeight: 'bold',
                    border: '1px solid #ADADAD',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                  }}
                >
                  {receipt.logisName}退回交接明细单
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>{receipt.expressName}</td>
                <td style={{ border: '1px solid #ADADAD' }}>交接时间</td>
                <td style={{ border: '1px solid #ADADAD' }}>
                  {receipt.startTime && receipt.startTime.split(' ')[0]}
                </td>
              </tr>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>快件总量</td>
                <td style={{ border: '1px solid #ADADAD' }}>{receipt.totalCount}</td>
                <td style={{ border: '1px solid #ADADAD' }}>其中:货到付款</td>
                <td style={{ border: '1px solid #ADADAD' }}>
                  {receipt.totalPaymentCount}件 金额{(receipt.totalPayment / 100).toFixed(2)}元
                </td>
              </tr>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>快递公司确认签字</td>
                <td style={{ border: '1px solid #ADADAD' }} />
                <td style={{ border: '1px solid #ADADAD' }}>近邻宝确认签字/签字日期</td>
                <td style={{ border: '1px solid #ADADAD' }} />
              </tr>
            </tbody>
          </table>
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td colSpan={8}>快递明细</td>
              </tr>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>NO</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递单号</td>
                <td style={{ border: '1px solid #ADADAD' }}>金额(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>退回原因</td>
              </tr>
              {list.map((item: any, index: number) => (
                <tr
                  key={item.orderId}
                  style={{
                    lineHeight: '32px',
                    height: '32px',
                    fontSize: 12,
                    textAlign: 'center',
                  }}
                >
                  <td style={{ border: '1px solid #ADADAD' }}>{index + 1}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.expCode}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.payment}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.reason}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Modal>
    );
  }
}

export default PrintElemInfo;
